<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统-借阅查询</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/lib/jquery-1.11.0.min.js}"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="inc/top :: div"></div>
    <div th:replace="inc/left :: div"></div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;" id="lay_body">
            <fieldset class="layui-elem-field">
                <legend>我的借阅查询</legend>
                <div class="layui-field-box">
                    <div style="float: left; width: 150px;position:fixed">
                        <ul id="bookType"></ul>
                    </div>
                    <div style="margin-left: 155px;">
                        <div id="queryDiv">
                            <form class="layui-form" id="queryForm" method="post"
                                  th:action="@{/admin/myBorrow/queryMyBorrow}">
                                <input type="hidden" id="queryBookType" name="bookTypeId" th:value="${bookTypeId}"/>
                                <div class="layui-form-item">
                                    <div style="display:inline-block; ">
                                        <label class="layui-form-label">借阅时间</label>
                                        <input type="text" id="borrwDate" readonly="readonly" name="borrwDate" required lay-verify="required" autocomplete="off"
                                               class="layui-input"  style="width: 150px;">
                                    </div>
                                    <div style="display:inline-block;">
                                        <label class="layui-form-label">是否归还</label>
                                        <input type="checkbox" name="stats" lay-skin="switch" lay-text="是|否">
                                    </div>

                                    <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </form>
                        </div>
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <td width="50" align="center" fixed="left">序号</td>
                                <td align="center">书名</td>
                                <td align="center">作者</td>
                                <td align="center">出版社</td>
                                <!--<td align="center">费用</td>-->
                                <td align="center">借入时间</td>
                                <td align="center">归还时间</td>
                                <td th:width="100" align="center" fixed="right">操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="b,stat : ${borrows}">
                                <td width="50" th:text="${stat.index+1}" fixed="left"></td>
                                <td th:text="${b.book.name}" align="center"></td>
                                <td th:text="${b.book.author}" align="center"></td>
                                <td th:text="${b.book.press}" align="center"></td>
                                <!--<td th:text="${b.borrow.price}" align="center"></td>-->
                                <td th:text="${b.borrow.borrwDate}" align="center"></td>
                                <td th:text="${b.borrow.repaidDate}" align="center"></td>
                                <td th:width="100" align="center" fixed="right">
                                    <a class="layui-btn layui-btn-primary layui-btn-xs"
                                       th:onclick="'look('+${b.book.id}+')'">查看</a>

                                    <a id="'repaidBtn'+${book.id}" class="layui-btn layui-btn-xs"
                                       th:onclick="'repaidBook('+${b.borrow.getId()}+')'" th:if="${b.borrow.stats eq '借入'}">归还</a>

                                    <a class="layui-btn layui-btn-xs"
                                       th:onclick="'borrowBook('+${b.book.id}+')'" th:if="${b.borrow.stats eq '归还'}">已归还</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div id="page"></div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
    <div th:replace="inc/foot :: div"></div>
</div>
<div id="pagenum">
    <!--<input type="hidden" id="pagesum" th:value="${borrows.size()}">-->
</div>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage;

        //总页数低于页码总数
        laypage.render({
            elem: 'page'
            , count: $('#pagesum').val()
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
            , jump: function (obj) {
                console.log(obj)
            }
        });
    });
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            return true;
        });
    });
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#borrwDate' //指定元素
        });
    });
</script>
<script type="text/javascript">
    var layer;
    layui.use('layer', function () {
        layer = layui.layer;
    });

    $(function () {
        $('#menu a').each(function () {
            var aText = $(this).text();
            if ('借阅查询' == aText) {
                $(this).parent('dd').addClass('layui-this');
            }
        });

    });

    function look(id) {
        window.open('/admin/book/lookBook/' + id);
    }


    function repaidBook(id) {
        $.post('/admin/borrow/repaidBook/'+id, {}, function (json) {
            alert(json.info);
            window.location.reload();
        });
    }

</script>
<script th:inline="javascript">
    /*<![CDATA[*/

    var data = /*[[${bookType.data}]]*/ 'Sebastian';

    /*]]>*/

    //console.info(data);
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });
    var layer;
    layui.use('layer', function () {
        layer = layui.layer;
    });
    layui.use('tree', function () {
        layui.tree({
            elem: '#bookType' //传入元素选择器
            , nodes: data,
            click: function (node) {
                //console.info(node.name);
                $('#queryBookType').attr('value', node.id);
                //$('#queryForm').submit();
                window.location = '/admin/myBorrow/queryBorrowByBookType/' + node.id;
            }
        });
    });
</script>
</body>

</html>